//1. 引入路由
import Vue from "vue";
import VueRouter from "vue-router";

const Home = () => import("../views/Home");
const Login = () => import("../views/Login");
const News = () => import("../views/Home/components/News");
const Music = () => import("../views/Home/components/Music");
const Game = () => import("../views/Home/components/Game");
const GameItem = () => import("../views/Home/components/Game/Item");

//2. 把路由作为插件使用
Vue.use(VueRouter);

//3. 实例化路由得到路由对象
const router =  new VueRouter({
  //设置路由模式为history模式!!!!
  mode: "history",
  //使用routes配置项配置路由表
  routes: [
    {
      path: "/home",
      component: Home,
      redirect: "/home/news",
      children: [
        {
          path: "news",
          component: News,
          name: "News",
          meta:{
            icon:"aaa",
            title:"新闻"
          }
        },
        {
          path: "music",
          component: Music,
          name: "Music",
        },
        {
          path: "game",
          component: Game,
          name: "Game",
          children: [
            {
              path: "item/:id/:title?",
              component: GameItem,
              name: "GameItem",
             /* 
                定义路由的时候可以配置 meta 字段
                有时，你可能希望将任意信息附加到路由上，如路由名称、谁可以访问路由,当前路由展示图标等。
                这些事情可以通过meta属性来实现，并且它可以在任意地方都被访问到
                当前我们可以通过this.$route.meta来获取
              
              */
                meta: {
                  icon: "xxx1",
                  tit: "Item组件",
                },
                props($route) {
                  return {
                    ...$route.params,
                    ...$route.query,
                    a: 1,
                  };
                },
                beforeEnter(to, from, next) {
                  console.log("item的路由独享守卫", to, from);
                  next();
                },
            },
          ],
        },
        //默认子路由配置方式1
        /*  {
          path: "",
          redirect: "/home/news",
        }, */
      ],
    },
    {
      path: "/login",
      component: Login,
      name: "Login",
    },
    //匹配默认路由
    {
      path: "/",
      //重定向的配置
      redirect: "/home",
    },
  ],
});

/* 
  全局前置守卫(beforeEach):只要当一个导航触发时，全局前置守卫按照创建顺序调用
  全局解析守卫(beforeResolve):在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用(并没有渲染)
  全局后置钩子(afterEach):当整个导航全局结束的时候触发,这些钩子不会接受 next 函数也不会改变导航本身(只能做收尾工作)
  路由独享守卫(beforeEnter):设置给某一个固定的路由的路由表中,当当前的路由被触发的时候,路由独享守卫就会在进入路由之前触发
*/
//一般来说路由守卫都会接受一个回调函数作为参数,回调函数接受3个参数
//1.to:要去的路由的路由对象 2.from:来的路由的路由对象  3.next函数,是否放行的函数
//书写路由全局前置守卫
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫1", to, from);
  next();
});
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫2", to, from);
  next();
});
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫3", to, from);
  next();
});
//书写路由全局解析守卫
router.beforeResolve((to, from, next) => {
  console.log("全局解析守卫", to, from);
  next();
});
//书写路由全局后置钩子
router.afterEach((to, from) => {
  console.log("全局后置钩子", to, from);
});

export default router;